<template>
  <div class="question-page">
    <div class="chat-container" ref="chatContainerRef" @scroll="scrollEvent">
      <div class="version-container" v-if="showList">
        <div class="version" @click="viewFn">
          <div><img class="version-img" src="../../assets/chat/logo.png" alt="" /></div>
          <div class="version-text">百昌师爷大模型2.0 <span class="gongce">公测</span></div>
        </div>
      </div>
      <QuestionExample
        title="你好，我是师爷智能客服"
        :questionList="questionList"
        @askFn="askFn"
        :showList="showList"
      />
      <div v-for="(item, index) in chatList" :key="index" class="chat-list-container">
        <div class="chat-item" :class="item.type === 'user' ? 'user' : 'ai'">
          <div v-if="item.type === 'user'" class="question">
            <div class="message" v-if="item.message && item.message.length > 0">{{ item.message[0] }}</div>
            <img class="avatar" src="../../assets/chat/userAvatar.png" alt="" />
          </div>
          <div v-else-if="item.type === 'ai'">
            <div v-if="item.message.length > 0 || item.isLoading" class="answer-container">
              <div class="answer">
                <div class="avatar-page">
                  <div><img class="avatar" src="../../assets/chat/aiAvatar.png" alt="" /></div>
                  <div class="page-container" v-if="item.message.length > 1">
                    <span class="pre-page" @click="preFn(index, item.answerIndex)">&lt;</span
                    >{{ item.answerIndex + 1 }} / {{ item.message.length
                    }}<span class="next-page" @click="nextFn(index, item.answerIndex)">&gt;</span>
                  </div>
                </div>

                <div class="answer-message">
                  <div v-if="item.isLoading" class="markdown-body">
                    <!-- <div v-html="currentHTML" class="markdown-body" /> -->
                    <div>
                      <h4>师爷模型深度思考中...</h4>
                      <div
                        style="
                          color: gray;
                          font-size: 14px;
                          padding-left: 10px;
                          margin-bottom: 10px;
                          line-height: 25px;
                          border-left: 1px solid #e5e5e5;
                        "
                      >
                        {{ currentThinkHTML }}
                      </div>
                    </div>
                    <div v-html="currentAnswerHTML"></div>
                  </div>
                  <!-- <div v-else v-html="item.message[item.answerIndex]" class="markdown-body" /> -->
                  <div v-else class="markdown-body">
                    <div>
                      <h4>
                        师爷模型已深度思考
                        <el-icon
                          style="vertical-align: middle; cursor: pointer"
                          v-if="!item.showThinkList[item.answerIndex]"
                          @click="showThinkFn(index, item.answerIndex)"
                        >
                          <ArrowDown />
                        </el-icon>
                        <el-icon
                          style="vertical-align: middle; cursor: pointer"
                          v-else
                          @click="hideThinkFn(index, item.answerIndex)"
                        >
                          <ArrowUp />
                        </el-icon>
                      </h4>
                      <div
                        v-show="item.showThinkList[item.answerIndex]"
                        class="think-container"
                        style="
                          color: gray;
                          font-size: 14px;
                          padding-left: 10px;
                          margin-bottom: 10px;
                          line-height: 25px;
                          border-left: 1px solid #e5e5e5;
                        "
                      >
                        {{ item.thinkList[item.answerIndex] }}
                      </div>
                    </div>
                    <div class="answerStr" v-html="item.answerList[item.answerIndex]"></div>
                  </div>
                </div>
              </div>
              <div class="btn-container">
                <div class="opt-container">
                  <div v-if="index === chatList.length - 1">
                    <!-- <span v-if="item.isLoading" class="stop-btn" @click="stopFn">停止生成</span> -->
                    <span v-if="!item.isLoading && preInputValue" class="regenerate-btn" @click="regenerateFn"
                      >重新生成</span
                    >
                  </div>
                </div>
                <div class="tool-container" v-if="!item.isLoading">
                  <el-icon
                    class="copy"
                    :class="copyIndex === index ? 'copy-acive' : ''"
                    @click="copyFn(index, item.answerIndex)"
                    :data-clipboard-text="copyText"
                  >
                    <CopyDocument />
                  </el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="loading-status" v-if="loadingStatus">
        <div><img class="avatar" src="../../assets/chat/aiAvatar.png" alt="" /></div>
        <div class="think">思考中…</div>
        <div><img class="loading-img" src="../../assets/chat/loading.gif" alt="" /></div>
      </div>
      <div v-if="!isLoading">
        <div class="scroll-container scroll-top" v-if="scrollTopShow">
          <el-icon style="vertical-align: middle" @click="scrollTopFn">
            <ArrowUp />
          </el-icon>
        </div>
        <div class="scroll-container scroll-bottom" v-else-if="scrollBottomShow">
          <el-icon style="vertical-align: middle" @click="scrollBottomFn">
            <ArrowDown />
          </el-icon>
        </div>
      </div>
    </div>
    <div class="input-container">
      <div class="stop-container" @click="stopFn" v-if="isLoading">
        <img class="stop-img" src="../../assets/chat/stop.png" alt="" />停止生成
      </div>
      <el-input
        class="input"
        type="textarea"
        v-model="inputValue"
        placeholder="请输入你的问题"
        :autosize="{ minRows: 1, maxRows: 11 }"
        @keydown.enter.native="inputBlurFn($event)"
      />
      <div class="icon-container" :style="{ cursor: isLoading ? '' : 'pointer' }" @click="inputBlurFn">
        <img v-if="isLoading" class="loading-icon" src="../../assets/chat/loading.gif" alt="" />
        <img v-else-if="!isLoading && inputValue" src="../../assets/chat/send.svg" class="send-icon" alt="" />
        <img v-else src="../../assets/chat/unsend.svg" class="send-icon" alt="" />
      </div>
      <Agreement />
    </div>
    <ViewDialog ref="viewDialogRef" />
  </div>
</template>
<script lang="ts" src="./index.ts"></script>
